import { useState } from 'react';
// import PropTypes from 'prop-types';
import { PageContainer } from '@ant-design/pro-components';
import { Link, useSearchParams } from '@umijs/max';
import { Button } from 'antd';
import { toLower } from 'lodash-es';

import NodesApi from './NodesApi';
import EdgesApi from './EdgesApi';
// import Overview from './Overview';

const tabList = [
  {
    tab: 'Nodes 节点',
    key: 'nodes',
  },
  {
    tab: 'Edges 连线',
    key: 'edges',
  },
  {
    tab: 'Reactflow 案例',
    key: 'demo',
  },
];
const keys = tabList.map(it => it.key);

ReactflowApp.propTypes = {};

function ReactflowApp() {
  const [searchParams] = useSearchParams();
  const { tabKey } = Object.fromEntries(searchParams);

  const [activeKey, setActiveKey] = useState(toLower(tabKey) || 'nodes');

  return (
    <PageContainer
      className='pageContainer'
      tabList={tabList}
      tabProps={{ type: 'card' }}
      tabActiveKey={activeKey}
      onTabChange={setActiveKey}
      extra={[
        <Link to='/designer' key={'new'}>
          <Button type='link'>新建</Button>
        </Link>,
      ]}
    >
      <TabContent tabKey={activeKey} />
    </PageContainer>
  );
}

export default ReactflowApp;

function TabContent({ tabKey }: { tabKey: string }) {

  switch (tabKey) {
    case keys[0]:
      return <NodesApi />;
    case keys[1]:
      return <EdgesApi />;
    case keys[2]:
      return 200
      // return <Overview />;
  }
  return null;
}
